<template>
	<view>
		<view class="header-delivery">
			<view class="item">
				<view class="inp val" @click="openAddressForm('sender')">
					<view class="left">
						<image src="/subpages/static/images/icon-02.png" class="icon" mode="widthFix" />
					</view>
					<view class="right">
						<text class="name"
							:class="{'placeholder': !sender.sendName}">{{ sender.sendName || "请选择寄件人" }}</text>
						<text class="tel" v-if="sender.sendPhone">{{ sender.sendPhone }}</text>
						<template v-if="region == 'domestic'">
							<text class="content" v-if="sender.sendAddressDetail">{{ sender.sendAddressDetail }}</text>
						</template>
						<template v-else>
							<text class="content" v-if="query.sendCountryCode">
								{{ query.sendCountryCode + query.sendCityName }}
							</text>
						</template>
					</view>
				</view>
				<view class="btn" style="border-left: 1px solid #D3D3D3;padding-left: 20rpx;"
					@click="openAddressBook('sender')">地址薄</view>
			</view>
			<view class="item">
				<view class="inp val" @click="openAddressForm('receiver')">
					<view class="left">
						<image src="/subpages/static/images/icon-03.png" class="icon" mode="widthFix" />
					</view>
					<view class="right">
						<text class="name" :class="{'placeholder': !receiver.recName}">
							{{ receiver.recName || "请选择收件人" }}
						</text>
						<text class="tel" v-if="receiver.recPhone">{{ receiver.recPhone }}</text>
						<template v-if="region == 'domestic'">
							<text class="content"
								v-if="receiver.recAddressDetail">{{ receiver.recAddressDetail }}</text>
						</template>
						<template v-else>
							<text class="content" v-if="query.recCountryCode">
								{{ query.recCountryCode + query.recCityName }}
							</text>
						</template>
					</view>
				</view>
				<view class="btn" style="border-left: 1px solid #D3D3D3;padding-left: 20rpx;"
					@click="openAddressBook('receiver')">地址薄</view>
			</view>
		</view>
		<view class="card-wraper card-list">
			<view class="card-item" @click="openGoodsInfo()">
				<view class="name">物品信息</view>
				<view class="val">
					<view class="text">
						<template v-if="query.cargo == ''">
							<text class="text-val">请选择</text>
							<uni-icons type="right" size="20"></uni-icons>
						</template>
						<template v-else>
							<text>{{query.cargo}}</text>/
							<text>{{query.weight}}kg</text>/
							<text>{{query.num}}</text>
						</template>
					</view>
				</view>
			</view>
		</view>
		<view class="card-wraper">
			<view class="card-title">
				<text>选择物流公司</text>
			</view>
			<view class="delivery-list">
				<scroll-view scroll-x class="scrollview-box">
					<template v-if="region == 'international'">
						<block v-for="item in deliveryList" :key="item.id">
							<view class="delivery-item" @click="radioChange(item)">
								<view class="pic">
									<image class="img" :src="item.image" mode="widthFix"></image>
								</view>
								<view click="text">
									<text style="font-size: 25rpx;display: block;">{{item.name}}</text>
								</view>
								<view class="check">
									<radio :value="item.id" :checked="item.id === currentValue" color="#2979FF"
										borderColor="#2979FF" style="transform: scale(0.75)" />
								</view>
							</view>
						</block>
					</template>
					<template v-else>
						<block v-for="item in domesticList" :key="item.id">
							<view class="delivery-item" @click="radioChange(item)">
								<view class="pic">
									<image class="img" :src="item.image" mode="widthFix"></image>
								</view>
								<view click="text">
									<text style="font-size: 25rpx;display: block;">{{item.name}}</text>
								</view>
								<view class="check">
									<radio :value="item.id" :checked="item.id === currentValue" color="#2979FF"
										borderColor="#2979FF" style="transform: scale(0.75)" />
								</view>
							</view>
						</block>
					</template>

				</scroll-view>
			</view>
		</view>
		<view class="card-wraper card-list">
			<view class="card-item">
				<view class="name">产品类型</view>
				<view class="val">
					<view class="text" @click="openCp">
						<text class="text-val">{{cpName}}</text>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>

			<view class="card-item">
				<view class="name">付款方式</view>
				<view class="val">

					<view class="btn">
						<u-button @click="isShow = true" v-if="priceName=='寄付月结'" type="success" shape="circle"
							text="绑定账号" style="width: 160rpx;height: 45rpx;" color="#2979FF"></u-button>
					</view>
					<text class="text-val">{{query.partnerId}}</text>
					<view class="text" @click="open">
						<text class="text-val">{{priceName}}</text>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>
			<view class="card-item" @click="openTimer">
				<view class="name">上门时间</view>
				<view class="val">
					<view class="text">
						<template v-if="query.smEndTime == ''">
							<text class="text-val">请选择</text>
						</template>
						<template v-else>
							<text class="text-val">{{query.smEndTime}}</text>
						</template>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-btn">
			<view class="comm-container">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view class="left">
						<text>预估</text><text class="num">￥{{query.price}}</text>
					</view>
					<view class="right">
						<u-button @click="submitForm" type="success" shape="circle" text="立即下单"
							style="width: 300rpx;height: 60rpx;" color="#2979FF"></u-button>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="isShow" :round="10" bgColor="#eee" mode="bottom" @close="close">
			<view class="popupInp">
				<view class="title">
					<text>绑定账号</text>
					<uni-icons @click="close" type="closeempty" size="24"></uni-icons>
				</view>
				<view class="inp">
					<input placeholder="请输入账号" v-model="partnerId" />
				</view>
				<u-button type="success" shape="circle" @click="bdyjzh" text="立即绑定" style="width: 80%;height: 60rpx;"
					color="#2979FF"></u-button>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
		<ctimer ref="cTimer" @callback="handleTimeSelection" />
		<uv-picker :columns="[ColumnsOptions]" ref="Picker" keyName="label" @confirm="Confirm" />
		<uv-picker :columns="[cptypelist]" ref="selectCp" @confirm="ConfirmSelectCp" />

	</view>
</template>

<script>
	import {
		fetchEstimatedPrice,
		getAddSFExpressAPI,
		getAddJDExpressAPI,
		getAdddhlExpressAPI,
		isYjzhhfApi
	} from "@/api/logistics.js"
	import ctimer from "../components/timer.vue"
	export default {
		props: {
			region: {
				type: String,
				default: 'domestic',
			}
		},
		components: {
			ctimer
		},
		data() {
			return {
				partnerId: "",
				currentValue: 0,
				checked: false,
				subscribeTime: {
					time: "选择时间",
					active: true
				},
				isShow: false,
				nowWeek: '',
				time: '',
				priceName: "寄付月结",
				cpName: "请选择",
				ColumnsOptions: [{
						value: 'SHIPPER',
						label: '寄付月结',
					},
					{
						value: 'CONSIGNEE',
						label: '到付',
					},
					{
						value: 'MONTHLY',
						label: '寄付现结',
					}
				],

				cptypelist: [
					'顺丰特快',
					'顺丰标快',
					'顺丰卡航',
					'同日达',
					'半日达'
				],
				kuaidiTypeLists: {
					jd: [
						'京东标快',
						'京东特快'
					],
					shunfengtrd: [
						'顺丰特快', '顺丰标快', '顺丰卡航', '同日达', '半日达'
					],
					shunfeng: [
						'顺丰特快', '顺丰标快', '顺丰卡航'
					],
				},
				sender: {
					sendName: "",
					sendPhone: "",
					sendAddressDetail: ""
				},
				receiver: {
					recName: "",
					recPhone: "",
					recAddressDetail: ""
				},
				query: {
					payType: "SHIPPER",
					sendName: "",
					sendPhone: "",
					sendAddressDetail: "",
					recName: "",
					recPhone: "",
					recAddressDetail: "",
					cargo: "",
					kuaidicomName: "顺丰",
					smStartTime: "",
					smEndTime: "",
					type: "1",
					price: 0,
					num: 0,
					kuaidicom: "shunfeng",
					weight: "1.0",
					remark: "订单备注",
					sendCountryCode: '',
					sendCityName: '',
					sendAddressRecZipCode: '',
					recCountryCode: '',
					recCityName: '',
					recAddressRecZipCode: '',
					expType: '',
					partnerId: ''
				},
				domesticList: [{
					id: 0,
					name: "顺丰快递",
					image: '../static/images/image-10.png',
					kuaidicom: "shunfeng",
					kuaidicomName: "顺丰"
				}, {
					id: 2,
					name: "京东快递",
					image: '../static/images/image-09.png',
					kuaidicom: "jd",
					kuaidicomName: "京东"
				}],
				deliveryList: [{
					id: 1,
					name: "DHL国际物流",
					image: '../static/images/image-11.png',
					kuaidicom: "dhl",
					kuaidicomName: "DHL"
				}]
			}
		},
		watch: {
			'query.sendCityName': {
				handler(newName, oldName) {
					if (this.query.kuaidicom == 'shunfeng') {
						if (this.query.sendCityName && this.query.sendCityName == this.query.recCityName) {
							this.cptypelist = this.kuaidiTypeLists.shunfengtrd
						} else {
							this.cptypelist = this.kuaidiTypeLists.shunfeng
						}
					}

					if (!this.cptypelist.includes(this.query.expType)) {
						this.cpName = "请选择"
						this.query.expType = ""
					}

				},
				immediate: true,
				deep: true
			},
			'query.recCityName': {
				handler(newName, oldName) {
					if (this.query.kuaidicom == 'shunfeng') {
						if (this.query.sendCityName && this.query.sendCityName == this.query.recCityName) {
							this.cptypelist = this.kuaidiTypeLists.shunfengtrd
						} else {
							this.cptypelist = this.kuaidiTypeLists.shunfeng
						}
					}

					if (!this.cptypelist.includes(this.query.expType)) {
						this.cpName = "请选择"
						this.query.expType = ""
					}

				},
				immediate: true,
				deep: true
			},
			'query.kuaidicom': {
				handler(newName, oldName) {

					if (newName == 'jd') {
						this.cptypelist = this.kuaidiTypeLists.jd
					} else if (newName == 'shunfeng') {
						if (this.query.sendCityName && this.query.sendCityName == this.query.recCityName) {
							this.cptypelist = this.kuaidiTypeLists.shunfengtrd
						} else {
							this.cptypelist = this.kuaidiTypeLists.shunfeng
						}

					}

					if (!this.cptypelist.includes(this.query.expType)) {
						this.cpName = "请选择"
						this.query.expType = ""
					}


				},
				immediate: true,
				deep: true
			},

		},
		methods: {
			async bdyjzh() {
				if (!this.partnerId) {
					this.$refs.uToast.show({
						type: "error",
						message: '请输入月结账号',
						position: "center",
					});
					return;
				}
				let yjtype = "1";
				if (this.query.kuaidicom == 'shunfeng') {
					yjtype = "2"
				} else if (this.query.kuaidicom == 'jd') {
					yjtype = "1"
				} else if (this.query.kuaidicom == 'dhl') {
					yjtype = "3"
				}
				console.log(this.query, "mmmmmmmmmmmmmmmmmmmm")
				// // 绑定月结账号
				// //校验月结账号是否正确
				const payzzh = {
					yjzh: this.partnerId,
					type: yjtype
				}
				const data = await isYjzhhfApi(payzzh);
				if (data.code == '200') {
					this.$refs.uToast.show({
						type: "success",
						message: "绑定成功",
						position: "center",
					});
					this.query.partnerId = this.partnerId
					this.isShow = false;
				} else {
					this.$refs.uToast.show({
						type: "error",
						message: '月结账号不存在',
						position: "center",
					});
				}

			},
			openTimer() {
				this.$refs.cTimer.open()
			},
			nextLink(path) {
				uni.navigateTo({
					url: path
				})
			},
			Confirm(e) {
				this.query.payType = e.value[0].value;
				this.priceName = e.value[0].label;
			},
			ConfirmSelectCp(e) {
				console.log(e, "========================")
				this.query.expType = e.value[0]
				this.cpName = e.value[0]
			},
			handleTimeSelection(data) {
				this.query.smStartTime = data.time + " " + data.subscribeTime.time;
				this.query.smEndTime = data.time + " " + data.subscribeTime.time;
			},
			async getEstimatedPrice() {
				const query = {
					kuaidicom: this.query.kuaidicom,
					sendAddr: this.sender.sendAddressDetail,
					recAddr: this.receiver.recAddressDetail,
					weight: this.query.weight
				}
				const data = await fetchEstimatedPrice(query);
				this.query.price = data.data[0].price;
			},
			//
			openGoodsInfo() {
				uni.navigateTo({
					url: `/subpages/views/courier/goodsInfo`,
					events: {
						Selected: (data) => {
							this.query.num = data.num;
							this.query.weight = data.weight;
							this.query.cargo = data.cargo;
						}
					}
				})
			},
			openAddressForm(type) {
				const that = this;
				uni.navigateTo({
					url: `/subpages/views/address/index?type=${type}&region=${this.region}`,
					events: {
						Selected: (data) => {
							if (type == "sender") {
								that.sender.sendName = data.name;
								that.sender.sendPhone = data.phone;
								if (that.region == 'international') {
									that.query.sendCountryCode = data.CountryCode;
									that.query.sendAddressRecZipCode = data.AddressRecZipCode;
									that.query.sendCityName = data.addressDetail;
								} else {
									that.sender.sendAddressDetail = data.province + data.city + data.county +
										data.addressDetail;

								}
							} else if (type == "receiver") {
								that.receiver.recName = data.name;
								that.receiver.recPhone = data.phone;
								if (that.region == 'international') {
									that.query.recCountryCode = data.CountryCode;
									that.query.recAddressRecZipCode = data.AddressRecZipCode;
									that.query.recCityName = data.addressDetail;
								} else {
									that.receiver.recAddressDetail = data.province + data.city + data.county +
										data.addressDetail;

								}
								that.getEstimatedPrice()
							}
						}
					}
				});
			},
			openAddressBook(type) {
				console.log("picker-view | uni-app官网")
				uni.navigateTo({
					url: `/subpages/views/address/list?type=${type}&region=${this.region}`,
					events: {
						Selected: (data) => {
							if (type === "sender") {
								// 如果 type 是 sender，更新 sender 对象
								this.sender.sendName = data.name;
								this.sender.sendPhone = data.phone;
								this.sender.sendAddressDetail = data.addressDetail;
								this.sender.sendCityName = data.city;
								this.sender.sendCountryCode = data.countryCode;
								this.sender.sendZipCode = data.postCode;
								this.query.sendCityName = data.city
								console.log(this.query.sendCityName,
									"that.query.sendCityName that.query.sendCityName that.query.sendCityName that.query.sendCityName "
								)




							} else if (type === "receiver") {
								// 如果 type 是 receiver，更新 receiver 对象
								this.receiver.recName = data.name;
								this.receiver.recPhone = data.phone;
								this.receiver.recAddressDetail = data.addressDetail;
								this.receiver.recCityName = data.city;
								this.sender.recCountryCode = data.countryCode;
								this.sender.recZipCode = data.postCode;
								this.query.recCityName = data.city

								this.getEstimatedPrice()
							}
						}

					}
				});
			},
			open() {
				this.$refs.Picker.open()
			},
			openCp() {
				this.$refs.selectCp.open()
			},
			close() {
				this.isShow = false;
			},
			radioChange(item) {
				this.currentValue = item.id;
				this.query.kuaidicom = item.kuaidicom;
				this.query.kuaidicomName = item.kuaidicomName;
				this.getEstimatedPrice()
				// 

			},
			async submitForm() {
				this.query.sendName = this.sender.sendName;
				this.query.sendPhone = this.sender.sendPhone;
				this.query.sendAddressDetail = this.sender.sendAddressDetail;
				this.query.sendCityName = this.sender.sendCityName;
				this.query.sendCountryCode = this.sender.sendCountryCode;
				this.query.sendZipCode = this.sender.sendZipCode;




				this.query.recName = this.receiver.recName;
				this.query.recPhone = this.receiver.recPhone;
				this.query.recAddressDetail = this.receiver.recAddressDetail;
				this.query.recCityName = this.receiver.recCityName;
				this.query.recCountryCode = this.sender.recCountryCode;
				this.query.recZipCode = this.sender.recZipCode;
				if (typeof this.query.num == 'string') {
					this.query.num = Number(this.query.num)
				}
				if (this.query.kuaidicomName == '顺丰') {
					const res = await getAddSFExpressAPI(this.query);
					if (res.code == 200) {
						this.$refs.uToast.show({
							type: "success",
							message: res.msg,
							position: "center",
						});
						setTimeout(() => {
							uni.redirectTo({
								url: "/subpages/views/main/index"
							})
						}, 1000)
					}
				} else if (this.query.kuaidicomName == '京东') {
					const res = await getAddJDExpressAPI(this.query);
					if (res.code == 200) {
						this.$refs.uToast.show({
							type: "success",
							message: res.msg,
							position: "center",
						});
						setTimeout(() => {
							uni.redirectTo({
								url: "/subpages/views/main/index"
							})
						}, 1000)
					}
				} else if (this.query.kuaidicomName == 'DHL') {
					this.query.type = '3'
					const res = await getAdddhlExpressAPI(this.query);
					if (res.code == 200) {
						this.$refs.uToast.show({
							type: "success",
							message: res.msg,
							position: "center",
						});
						setTimeout(() => {
							uni.redirectTo({
								url: "/subpages/views/main/index"
							})
						}, 1000)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-delivery {
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;

		.item {
			display: flex;
			justify-content: space-between;

			padding: {
				top: 40rpx;
				bottom: 40rpx;
			}

			;
			margin: 0 20rpx;
			align-items: center;

			&:nth-child(1) {
				border-bottom: 1px solid #D3D3D3;
			}

			.val {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.tel {
					margin-left: 20rpx;
				}

				.content {
					margin-left: 20rpx;
					display: block;
				}
			}

			&.status {
				background: #FFF8F2;
				border: 3rpx solid #FF7000;
				border-radius: 20rpx;
			}

			.icon {
				width: 45rpx;
				height: 45rpx;
				vertical-align: middle;
			}

			.name {
				font-size: 32rpx;
				margin-left: 20rpx;
			}
		}
	}

	.card-list {
		.card-item {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;

			.val {
				display: flex;
				align-items: center;

				.text-val {
					margin-left: 20rpx;
				}
			}
		}
	}

	.scrollview-box {
		white-space: nowrap;
		width: 100%;
	}

	.delivery-list {
		margin-top: 35rpx;

		.delivery-item {
			border: 2rpx solid #2979FF;
			display: inline-flex;
			padding: 20rpx;
			border-radius: 20rpx;
			width: 270rpx;
			margin-right: 20rpx;
			justify-content: space-between;
			align-items: center;

			.img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}

			.text {
				text {
					display: block;
				}
			}
		}
	}

	.footer-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		padding-bottom: 30rpx;

		.left {
			font-size: 36rpx;

			.num {
				color: red;
			}
		}
	}

	.popupInp {
		padding: 30rpx 30rpx 100rpx 30rpx;

		.title {
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;
			font-size: 36rpx;
			align-items: center;
		}

		.inp {
			margin-bottom: 40rpx;
			border-bottom: 1px solid #ccc;
			padding-bottom: 10rpx;
		}
	}
</style>